<template>
  <div class="chat-container">
    <!-- 欢迎信息 -->
    <div v-if="messages.length == 0" class="welcome-message">
      <h3 class="welcome-title">我是数据分析成果大脑，很高兴见到您！</h3>
      <h5 class="welcome-subtitle">我可以帮你数据智能分析、深度挖掘、为灾害预测、应急响应和调度规划提供建议和技术支持，请把你的任务交给我吧~</h5>
    </div>

    <!-- 消息区域 -->
    <el-scrollbar ref="scroll" class="messages-box" style="max-height: 60vh; overflow-y: auto;">
      <!-- 消息列表 -->
      <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]">
        <el-card shadow="hover" class="message-card">
          <div class="message-header">
            <el-tag :type="msg.role === 'user' ? 'primary' : 'success'">
              {{ msg.role === 'user' ? '您' : '助手' }}
            </el-tag>
            <!-- 添加展开/收起按钮 -->
            <el-button v-if="msg.content.length > 1500 && msg.role === 'assistant'" type="text" size="mini"
              @click="toggleExpand(index)" class="expand-btn">
              {{ expandedMessages[index] ? '收起' : '展开全部' }}
            </el-button>
          </div>
          <!-- 添加内容容器和滚动条 -->
          <div class="content-container" :class="{ 'collapsed': !expandedMessages[index] && msg.content.length > 1500 }">
            <formatted-content :content="msg.content" />
          </div>

        </el-card>
      </div>

      <!-- 加载指示器 -->
      <div v-if="loading" class="loading-indicator">
        <i class="el-icon-loading"></i> 正在生成...
      </div>
    </el-scrollbar>

    <!-- 灾害类型选择工具栏 - 改为多选框形式 -->
    <div class="disaster-toolbar">
      <div class="toolbar-content">
        <!-- <span class="toolbar-label">灾害类型：</span> -->

        <el-checkbox-group v-model="selectedDisasters" :max="1" class="disaster-checkbox-group">
          <el-checkbox size="mimi" v-for="(params, disaster) in paramData" :key="disaster" :label="disaster"
            class="disaster-checkbox">
            {{ disaster }}
          </el-checkbox>
        </el-checkbox-group>


        <div class="toolbar-buttons">
          <el-button type="primary" icon="el-icon-edit" @click="openFormDialog"
            :disabled="selectedDisasters.length === 0" class="form-btn" size="mimi">
            填写参数
          </el-button>

          <el-button type="info" icon="el-icon-delete" @click="clearFormData" :disabled="!hasFormData" class="clear-btn"
            size="mimi">
            清除参数
          </el-button>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area">
      <el-row type="flex" align="middle">
        <el-col :span="24">
          <div class="input-with-buttons">
            <el-input v-model="inputText" type="textarea" :rows="3" placeholder="输入您的问题..."
              @keydown.enter.native.prevent="sendMessage" class="input-box" />

            <div class="inner-buttons">
              <el-button type="primary" :loading="loading" @click="sendMessage" size="small" class="send-btn">
                发送
              </el-button>
              <el-button type="danger" @click="stopMessage" size="small" class="stop-btn">
                停止
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 参数表单对话框 - 使用原生HTML表单 -->
    <div v-if="formDialogVisible" class="native-form-dialog">
      <div class="dialog-overlay" @click="closeFormDialog"></div>
      <div class="dialog-content">
        <div class="dialog-header">
          <h3>参数设置</h3>
          <i class="el-icon-close close-icon" @click="closeFormDialog"></i>
        </div>

        <form class="native-form" @submit.prevent="submitForm">
          <!-- 按灾害类型分组显示参数 -->
          <div v-for="disaster in selectedDisasters" :key="disaster" class="disaster-section">
            <h4 class="disaster-title">{{ disaster }} 参数</h4>
            <div class="disaster-params">
              <div v-for="param in paramData[disaster]" :key="param.id" class="form-group">
                <label>
                  {{ param.paramName }}
                  <span v-if="param.paramUnit">({{ param.paramUnit }})</span>
                </label>
                <input v-if="param.dataType === 'number'" type="number"
                  v-model.number="formData[disaster][param.paramName]" :placeholder="`请输入${param.paramName}`"
                  :required="param.isRequired" />
                <input v-else type="text" v-model="formData[disaster][param.paramName]"
                  :placeholder="`请输入${param.paramName}`" :required="param.isRequired" />
              </div>
            </div>
          </div>

          <div class="form-buttons">
            <button type="button" class="cancel-btn" @click="closeFormDialog">取消</button>
            <button type="submit" class="submit-btn">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Ref, Prop } from 'vue-property-decorator';
import LocalStreamHandler from '@/utils/LocalStreamHandler';
import FormattedContent from '@/components/Chat/FormattedContent.vue';
import { selectAllParameters } from '@/api/indexCategory';
import { Getter } from 'vuex-class';

interface ChatMessage {
  role: string;
  content: string;
  inputs: Record<string, any>;
  metadata?: {
    usage?: any;
    resources?: any[];
  };
  files?: Array<{
    type: string;
    url: string;
  }>;
}

interface DisasterParam {
  id: number;
  typeId: number;
  paramName: string;
  paramUnit: string;
  dataType: string;
  isRequired: boolean;
  typeName: string;
}

@Component({
  components: { FormattedContent }
})
export default class ChatWindow extends Mixins(LocalStreamHandler) {
  @Ref() readonly scroll!: any;
  @Prop() answerMap!: any[];
  @Getter userInfo;
  @Getter indexData;
  private expandedMessages: Record<number, boolean> = {};
  private streamDataHandler!: (chunk: string) => void;
  private streamMetaHandler!: (meta: any) => void;
  private streamFileHandler!: (file: any) => void;
private typewriterTimer: number | null = null; // 打字机效果的定时器
  // 参数数据
  paramData: Record<string, DisasterParam[]> = {};

  // 表单相关状态
  selectedDisasters: string[] = []; // 改为数组存储多个选择的灾害类型
  formDialogVisible = false;
  formData: any = {}; // 结构改为 {灾害类型: {参数名: 值}}
  currentParams: DisasterParam[] = [];

  // 消息相关状态
  messages: ChatMessage[] = [];
  inputText = '';
  loading = false;
  currentAnswer = '';
  data: any = null;

  // 计算属性：是否有表单数据
  get hasFormData() {
    return Object.keys(this.formData).length > 0;
  }

  // 灾害类型变更处理
  handleDisasterChange() {
    // 初始化所有选择的灾害类型的表单数据
    this.selectedDisasters.forEach(disaster => {
      if (!this.formData[disaster]) {
        this.$set(this.formData, disaster, {});
        const params = this.paramData[disaster] || [];
        params.forEach(param => {
          this.$set(this.formData[disaster], param.paramName, '');
        });
      }
    });

    // 移除不再选择的灾害类型的数据
    Object.keys(this.formData).forEach(disaster => {
      if (!this.selectedDisasters.includes(disaster)) {
        this.$delete(this.formData, disaster);
      }
    });
  }

  // 添加切换展开状态的方法
  toggleExpand(index: number) {
    this.$set(this.expandedMessages, index, !this.expandedMessages[index]);
    this.$nextTick(() => this.scrollToBottom());
  }
  // 其他方法保持不变...
  private handleStreamData(chunk: string) {
    this.currentAnswer += chunk;
    const lastIndex = this.messages.length - 1;
    if (lastIndex >= 0) {
      const newMsg = { ...this.messages[lastIndex], content: this.currentAnswer };
      this.messages.splice(lastIndex, 1, newMsg);
    }
    this.scrollToBottom();
  }


  // 打开表单对话框
  openFormDialog() {
    if (this.selectedDisasters.length === 0) return;
    this.handleDisasterChange(); // 确保表单数据是最新的
    this.formDialogVisible = true;
  }

  // 关闭表单对话框
  closeFormDialog() {
    this.formDialogVisible = false;
  }

  // 提交表单
  submitForm() {
    // 验证必填项
    let isValid = true;

    this.selectedDisasters.forEach(disaster => {
      const params = this.paramData[disaster] || [];
      params.forEach(param => {
        if (param.isRequired && !this.formData[disaster][param.paramName]) {
          isValid = false;
          this.$message.warning(`请填写必填参数: ${disaster} - ${param.paramName}`);
        }
      });
    });

    if (isValid) {
      this.$message.success('参数已保存');
      this.formDialogVisible = false;
    }
  }

  // 清除表单数据
  clearFormData() {
    this.formData = {};
    this.selectedDisasters = [];
    this.$message.info('已清除参数数据');
  }

  // 发送消息
  async sendMessage() {
    if (!this.inputText.trim() || this.loading) return;

    this.loading = true;

    // 构建用户消息
    const userMessage: ChatMessage = {
      role: 'user',
      content: this.inputText,
      inputs: {
        query_type: "灾情分析",
        disaster: `灾害参数：${this.getFlattenedFormData()}`  // 包含所有表单参数
      },
      files: this.data ? [{ type: 'data', url: '#' }] : undefined
    };

    this.messages.push(userMessage);

    // 助手消息
    const assistantMsg: ChatMessage = {
      role: 'assistant',
      content: '',
      inputs: {
        query_type: "灾情分析",
        disaster: `灾害参数：${this.getFlattenedFormData()}`  // 包含所有表单参数
      },
      files: this.data ? [{ type: 'data', url: '#' }] : undefined
    };
    this.messages.push(assistantMsg);

    this.$nextTick(() => this.scrollToBottom());
    this.currentAnswer = '';
    let processedQuery = this.inputText;
    this.inputText = '';

    // 添加表单参数到查询中
    if (this.hasFormData) {
      processedQuery += "。参数设置：";
      this.selectedDisasters.forEach(disaster => {
        const params = this.formData[disaster] || {};
        Object.keys(params).forEach(key => {
          if (params[key] !== null && params[key] !== '') {
            processedQuery += `${disaster}的${key}:${params[key]}; `;
          }
        });
      });
    }

    // 添加指标数据
    if (this.indexData) {
      processedQuery += " 基于下列数据进行分析：" + JSON.stringify(this.indexData);
    }

    // 答案映射处理
    if (this.answerMap && this.answerMap.length > 0) {
      for (const item of this.answerMap) {
        if (processedQuery.includes(item.name)) {
          processedQuery = processedQuery.replace(item.name, item.value);
          break;
        }
      }
    }

    // 预设关键词匹配
    if (processedQuery.includes("据气象局天气预报") ||
      processedQuery.includes("请根据本系统普查数据")) {
      // 模拟API延迟
      await new Promise(resolve => setTimeout(resolve, 1000));

       if (this.typewriterTimer) {
        clearInterval(this.typewriterTimer);
        this.typewriterTimer = null;
      }
      // 更新消息内容
      const reportContent = "# 土默特左旗察素齐镇洪涝灾害预测分析报告\n\n## 一、基本情况\n\n**时间**：明日下午至夜间  \n**地点**：内蒙古自治区呼和浩特市土默特左旗察素齐镇  \n**灾害类型**：短时强降水引发的洪涝灾害  \n**灾害等级**：根据气象预报，预计为**较大洪涝灾害（Ⅲ级）**  \n**主要风险**：  \n- 短时强降水（50mm/h，累计80-100mm）  \n- 阵风6-7级可能加剧城市内涝风险  \n- 低洼地区、老旧小区、地下空间等易积水区域风险高  \n\n## 二、损失估算\n\n根据历史数据和普查资料，预测可能造成的直接和间接损失如下：\n\n| **损失类型**       | **预估损失（万元）** | **说明**                                                                 |\n|---------------------|----------------------|--------------------------------------------------------------------------|\n| 房屋损毁           | 200-300             | 主要影响老旧房屋和低洼地区                                               |\n| 基础设施损坏       | 150-200             | 包括道路、排水系统、电力设施等                                           |\n| 农业损失           | 100-150             | 玉米等农作物可能受灾（察素齐镇玉米播种面积13186.36亩）                   |\n| 商业中断           | 50-100              | 沿街商铺和地下商业设施可能受影响                                         |\n| 应急救援费用       | 50-80               | 包括物资调配、人员安置等                                                 |\n| **合计**           | **550-830**         |                                                                          |\n\n## 三、内涝风险区分析\n\n根据察素齐镇地形和排水系统状况，以下区域为高风险区：\n\n1. **低洼地区**：东沟村委会、沙尔沁村委会等区域\n2. **老旧小区**：大众路居委会、中山北路居委会等\n3. **地下空间**：商业综合体地下停车场、地下人防工程\n4. **交通枢纽**：G6高速察素齐出口周边\n5. **排水系统薄弱区**：部分老旧城区排水管网\n\n## 四、应急组织体系与职责\n\n### 1. 指挥架构\n\n**镇级防汛抗旱指挥部**（设在镇应急管理局）：\n- **指挥长**：镇长\n- **副指挥长**：分管副镇长、应急管理局局长、水务局局长\n- **成员单位**：应急、水务、公安、消防、医疗、交通、电力、通信等部门\n\n### 2. 救援力量与装备清单\n\n根据普查数据，当地可用救援力量与装备：\n\n| **救援力量/装备**       | **数量** | **来源**                                                                 |\n|--------------------------|----------|--------------------------------------------------------------------------|\n| 专业森林消防队          | 82人     | 土左旗林草局专业灭火队（灭火机具120台，防火车3辆）                       |\n| 民兵预备役              | 约200人  | 各社区/行政村民兵力量（如兵州亥村委会100人，友好村委会110人等）          |\n| 消防救援队伍            | 需市支援 | 需请求呼和浩特市消防支队支援                                             |\n| 救灾物资储备库          | 1处      | 土默特左旗发展和改革委员会应急救灾储备库（帐篷400顶，棉被150床等）       |\n| 应急避难场所            | 6处      | 总容量约30,000人（如哈达公园、世纪路公园等）                             |\n| 抽水泵                  | 0        | 需紧急调配                                                               |\n| 救生衣/救生圈           | 少量     | 部分社区有储备                                                           |\n\n### 3. 监测预警与信息发布\n\n**预警系统**：\n- 利用气象局预警系统实时监测降水情况\n- 水务部门监测河道水位和城市积水点\n\n**信息发布渠道**：\n1. 应急广播系统\n2. 短信、微信（各社区均有微信预警群）\n3. 电子显示屏（主要路口）\n4. 社区干部上门通知（针对老年人等特殊群体）\n\n### 4. 应急准备与资源前置\n\n**物资前置**：\n- 在6个应急避难场所提前储备饮用水、食品、毛毯等基本物资\n- 在低洼地区预置沙袋、抽水泵等防汛物资\n\n**力量部署**：\n- 将82名专业森林消防队员部署到高风险区域\n- 动员社区民兵预备役做好应急准备\n- 请求市级消防力量待命\n\n### 5. 重点区域防护措施\n\n1. **低洼居民区**：\n   - 提前组织弱势群体转移（根据普查数据，察素齐镇65岁以上人口约500人）\n   - 准备沙袋等挡水设施\n\n2. **地下空间**：\n   - 通知所有地下停车场提前转移车辆\n   - 准备应急抽水设备\n\n3. **交通枢纽**：\n   - 交警部门做好交通疏导准备\n   - 准备临时交通管制方案\n\n4. **排水系统**：\n   - 提前清理排水管网\n   - 在易积水点安排专人值守\n\n## 五、应急避难场所\n\n根据普查数据，察素齐镇有以下应急避难场所可用：\n\n| **避难场所名称**   | **容纳人数** | **地址**                               | **物资储备情况**               |\n|---------------------|--------------|----------------------------------------|--------------------------------|\n| 哈达公园           | 7,500        | G6高速察素齐出口往西200米路北         | 基本生活物资、医疗物资         |\n| 世纪路公园         | 8,000        | 旗政府对面                             | 无物资储备                     |\n| 健康主题公园       | 11,477       | 敕勒川大街文体中心西侧                 | 无物资储备                     |\n| 新政府广场         | 4,822        | 敕勒川大街旗政府前                     | 无物资储备                     |\n| 旧政府广场         | 2,400        | 人民路与乌兰大街东侧交汇处             | 无物资储备                     |\n| 阿勒坦汗公园       | 10,000       | 草原街奥林匹克体育馆东                 | 无物资储备                     |\n\n**总容量**：约30,000人，可满足紧急避难需求。\n\n## 六、灾后损失评估\n\n预计灾后需重点评估：\n1. 房屋受损情况（特别是老旧房屋）\n2. 基础设施损坏程度（道路、桥梁、排水系统）\n3. 农作物受损面积（玉米为主）\n4. 企业停产损失\n5. 应急救援成本\n\n## 七、优化建议\n\n1. **加强排水系统建设**：\n   - 对老旧城区排水管网进行改造升级\n   - 增加应急排水泵站\n\n2. **完善物资储备**：\n   - 增加救生艇、抽水泵等专业救援装备\n   - 在各社区建立应急物资储备点\n\n3. **提升预警能力**：\n   - 建设更精细化的气象监测网络\n   - 完善社区预警\"最后一公里\"机制\n\n4. **强化应急演练**：\n   - 定期组织防汛应急演练\n   - 加强社区居民防灾意识培训\n\n5. **优化避难场所管理**：\n   - 为各避难场所配备基本应急物资\n   - 明确各场所管理人员和运行机制\n\n## 八、结论\n\n察素齐镇面临较大洪涝灾害风险，但具备基本的应急响应能力。建议立即启动Ⅲ级应急响应，提前转移高风险区域群众，做好物资和力量准备，重点防范城市内涝，最大限度减少灾害损失。\n\n**应急值班电话**：土默特左旗应急管理局 XXX-XXXXXXX\n\n---\n\n**附件**：普查数据支撑表（部分）\n\n1. 救灾物资储备库物资清单：\n   - 救灾帐篷：400顶\n   - 棉被：150床\n   - 折叠床：86张\n   - 救援类物资折合金额：60万元\n\n2. 应急避难场所容量汇总：\n   ```json\n   {\n     \"categoryName\": \"减灾能力-乡镇与社区减灾能力-应急避难场所\",\n     \"data\": [\n       [\"哈达公园\", \"7500\"],\n       [\"世纪路公园\", \"8000\"],\n       [\"健康主题公园\", \"11477\"],\n       [\"新政府广场\", \"4822\"],\n       [\"旧政府广场\", \"2400\"],\n       [\"阿勒坦汗公园\", \"10000\"]\n     ]\n   }\n   ```\n\n3. 救援力量情况：\n   - 专业森林消防队：82人（土左旗林草局专业灭火队）\n   - 社区民兵预备役：约200人（分散在各社区）";
      
      // 开始打字效果
      let index = 0;
      this.typewriterTimer = window.setInterval(() => {
        if (index < reportContent.length) {
          this.currentAnswer += reportContent.charAt(index);
          const lastIndex = this.messages.length - 1;
          if (lastIndex >= 0) {
            const newMsg = { ...this.messages[lastIndex], content: this.currentAnswer };
            this.messages.splice(lastIndex, 1, newMsg);
          }
          this.scrollToBottom();
          index++;
        } else {
          // 打字完成
          if (this.typewriterTimer) {
            clearInterval(this.typewriterTimer);
            this.typewriterTimer = null;
          }
          this.loading = false;
        }
      }, 20); // 调整这个值可以改变打字速度
      const lastIndex = this.messages.length - 1;
      this.messages[lastIndex].content = this.currentAnswer;
      this.loading = false;
      return;
    }

    // 构建请求
    const request = {
      query: processedQuery,
      response_mode: "streaming",
      conversation_id: '',
      inputs: {
        query_type: "灾情分析",
        disaster: `灾害参数：${this.getFlattenedFormData()}`  // 包含所有表单参数
      },
      user: this.userInfo.userName,
      files: this.data ? [{
        type: 'custom',
        transfer_method: 'local_file',
        upload_file_id: this.data.id
      }] : []
    };

    try {
      await this.fetchLocalStream(request);
    } finally {
      this.loading = false;
    }
  }

  // 获取扁平化的表单数据（合并所有灾害类型的参数）
  getFlattenedFormData() {
    const flattened: Record<string, any> = {};
    this.selectedDisasters.forEach(disaster => {
      const params = this.formData[disaster] || {};
      Object.keys(params).forEach(key => {
        flattened[`${disaster}_${key}`] = params[key];
      });
    });
    return flattened;
  }

  // 其他方法保持不变...

  scrollToBottom() {
    if (this.scroll.wrap$ && this.scroll.wrap$.scrollHeight) {
      this.scroll.wrap$.scrollTop = this.scroll.wrap$.scrollHeight;
    }
  }

  // 初始化参数数据
  async initParamData() {
    try {
      const res: any = await selectAllParameters();
      if (res.code === 200 && res.result) {
        this.paramData = res.data;
      } else {
        this.$message.error('获取参数数据失败');
      }
    } catch (error) {
      this.$message.error('加载参数数据出错');
      console.error('Param data error:', error);
    }
  }

  mounted() {

    this.streamDataHandler = (chunk: string) => this.handleStreamData(chunk);
    this.streamMetaHandler = (meta: any) => this.handleStreamMeta(meta);
    this.streamFileHandler = (file: any) => this.handleStreamFile(file);

    this.$on('stream-data', this.streamDataHandler);
    this.$on('stream-meta', this.streamMetaHandler);
    this.$on('stream-file', this.streamFileHandler);

    (this as any).$bus.$on('index-data', (data: any) => {

      this.data = data;
    });
    this.initParamData();

    // 监听灾害类型变化
    this.$watch('selectedDisasters', () => {
      this.handleDisasterChange();
    }, { deep: true });
  }

  stopMessage() {
    this.abortStream();
    this.loading = false;
    // 停止打字效果
    if (this.typewriterTimer) {
      clearInterval(this.typewriterTimer);
      this.typewriterTimer = null;
    }
  }

  private handleStreamFile(file: any) {
    // 处理文件类型消息
    const lastMsg = this.messages[this.messages.length - 1];
    if (lastMsg) {
      lastMsg.files = lastMsg.files || [];
      lastMsg.files.push({
        type: file.type,
        url: file.url
      });
    }
  }

  private handleStreamMeta(meta: any) {
    // 更新元数据到当前消息
    const lastMsg = this.messages[this.messages.length - 1];
    if (lastMsg) {
      lastMsg.metadata = meta;
    }
  }
}
</script>

<style scoped lang="scss">
.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url(~@/assets/image/banner-background.png) center center no-repeat;
  position: relative;

  /* 欢迎信息样式 */
  .welcome-message {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    height: 100%;

    .welcome-title {
      color: #1a73e8;
      font-size: 24px;
      margin-bottom: 16px;
      font-weight: 500;
    }

    .welcome-subtitle {
      color: #606266;
      font-size: 16px;
      line-height: 1.6;
      max-width: 600px;
      opacity: 0.9;
    }
  }

  .message-card {
    max-width: 100%;
    margin: 5px;

    ::v-deep .el-card__body {
      padding: 15px;
    }
  }

  /* 灾害类型工具栏 - 多选框样式 */
  .disaster-toolbar {
    padding: 15px 20px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;

    .toolbar-content {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .toolbar-label {
        font-size: 12px;
        color: #606266;
        font-weight: 500;
        margin-bottom: 8px;
      }

      .disaster-checkbox-group {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 0px;

        .disaster-checkbox {
          min-width: 100px;
          background-color: #fff;
          border-radius: 4px;
          padding: 2px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s;

          &:hover {
            border-color: #409eff;
            box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
          }

          ::v-deep .el-checkbox__label {
            font-size: 12px;
          }
        }
      }

      .toolbar-buttons {
        display: flex;
        gap: 2px;
      }
    }
  }

  /* 消息区域 */
  .messages-box {
    flex: 1;
    padding: 20px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #c1c1c1;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    .message {
      margin-bottom: 16px;

      &.user {
        margin-left: 1px;

        .el-card {
          background: #f0f7ff;
        }
      }

      &.assistant {
        margin-right: 1px;

        .el-card {
          background: #f5f7fa;
        }
      }

      .message-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .expand-btn {
          padding: 0;
          font-size: 12px;
          color: #409eff;
        }
      }
    }

    .loading-indicator {
      text-align: center;
      color: #909399;
      padding: 10px;
    }
  }

  /* 输入区域 */
  .input-area {
    padding: 0px;
    background: white;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);

    .el-textarea {
      font-size: 16px;

      ::v-deep .el-textarea__inner {
        min-height: 120px !important;
        font-size: 16px;
        line-height: 1.6;
        padding: 15px 120px 15px 15px;
      }
    }
  }

  /* 原生表单对话框样式 */
  .native-form-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;

    .dialog-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .dialog-content {
      position: relative;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      width: 700px;
      max-height: 85vh;
      overflow-y: auto;
      z-index: 2001;

      .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        border-bottom: 1px solid #eee;
        background-color: #f5f7fa;

        h3 {
          margin: 0;
          font-size: 18px;
          color: #303133;
        }

        .close-icon {
          cursor: pointer;
          font-size: 20px;
          color: #909399;

          &:hover {
            color: #606266;
          }
        }
      }

      .native-form {
        padding: 20px 24px;

        .disaster-section {
          margin-bottom: 25px;
          border: 1px solid #ebeef5;
          border-radius: 6px;
          padding: 15px;
          background-color: #fafafa;

          &:last-child {
            margin-bottom: 15px;
          }

          .disaster-title {
            margin: 0 0 15px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #e4e7ed;
            color: #409eff;
            font-size: 16px;
          }

          .disaster-params {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
          }
        }

        .form-group {
          margin-bottom: 15px;

          label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #303133;
            font-size: 14px;

            &.required::after {
              content: '*';
              color: #f56c6c;
              margin-left: 4px;
            }
          }

          input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;

            &:focus {
              outline: none;
              border-color: #409eff;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
            }
          }
        }

        .form-buttons {
          display: flex;
          justify-content: flex-end;
          gap: 12px;
          margin-top: 20px;
          padding-top: 15px;
          border-top: 1px solid #eee;

          button {
            padding: 8px 20px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
          }

          .cancel-btn {
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;

            &:hover {
              background-color: #f5f7fa;
              border-color: #c0c4cc;
            }
          }

          .submit-btn {
            background: #409eff;
            border: 1px solid #409eff;
            color: white;

            &:hover {
              background: #66b1ff;
              border-color: #66b1ff;
            }
          }
        }
      }
    }
  }
}

/* 输入框容器 */
.input-with-buttons {
  position: relative;
}

.input-box {
  padding-right: 120px !important;
}

/* 按钮容器 */
.inner-buttons {
  position: absolute;
  right: 10px;
  bottom: 15px;
  z-index: 2;
  display: flex;
  gap: 8px;

  .el-button {
    opacity: 0.9;
    transition: opacity 0.2s;

    &:hover {
      opacity: 1;
      transform: translateY(-1px);
    }
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .disaster-toolbar {
    .toolbar-content {
      .disaster-checkbox-group {
        gap: 8px;

        .disaster-checkbox {
          min-width: 100px;
          padding: 6px 10px;
          flex: 1 0 calc(50% - 10px);
        }
      }
    }
  }

  .input-area {
    padding: 0 10px 10px;

    .el-textarea {
      font-size: 14px;

      ::v-deep .el-textarea__inner {
        min-height: 100px !important;
        font-size: 14px;
        padding: 10px 80px 10px 10px;
      }
    }

    .inner-buttons {
      bottom: 10px;
      right: 10px;
    }
  }

  /* 移动端对话框样式 */
  .native-form-dialog {
    .dialog-content {
      width: 95%;
      max-height: 90vh;

      .native-form {
        padding: 15px;

        .disaster-params {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}

/* 内容容器样式 */
.content-container {
  max-height: 500px;
  overflow-y: auto;
  padding: 5px;
  transition: all 0.3s ease;

  &.collapsed {
    max-height: 300px;
    overflow-y: hidden;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    }
  }
}
</style>